<template>
  <!-- 底部功能区 -->
  <div id="footerfun">
    <!-- 父标签页 -->
    <div class="faterTabs">
      <!-- 标签选项栏 -->
      <div class="faterTabsTop">
        <!-- 换图案标签标题 -->
        <div :class="style0" @click="tabClick(0)">
          <img class="changeImg" :src="change0" alt="换图案" />
          <span>换图案</span>
        </div>
        <!-- 换文字标签标题 -->
        <div :class="style1" @click="tabClick(1)" v-if="isShowText">
          <img class="changeImg" :src="change1" alt="换文字" />
          <span>换文字</span>
        </div>
        <!-- 选文字底色标签标题 -->
        <div :class="style2" @click="tabClick(2)" v-if="isShowText">
          <img class="changeImg1" :src="change2" alt="选文字底色" />
          <span>选文字底色</span>
        </div>
        <!-- 印名字标签标题 -->
        <div :class="style3" @click="tabClick(3)">
          <img class="changeImg" :src="change3" alt="印名字" />
          <span>印名字</span>
        </div>
      </div>

      <!-- 换图案内容区 -->
      <div v-if="fatherActive === 0" class="childrenTabs">
        <!-- 子标签选项栏 -->
        <div class="childrenTabsTop">
          <div
            class="childrenTabsTitle"
            v-for="(item, index) in changeImgTitleData"
            :key="index"
            @click="childrenTabClick(index)"
          >
            <div
              class="childrenTabsTitle1"
              :style="childrenActive !== index && childrenStyle.childrenStyle1"
            >
              {{ item.name }}
            </div>
            <div
              class="childrenTabsTitle2"
              :style="childrenActive !== index && childrenStyle.childrenStyle2"
            ></div>
          </div>
        </div>
        <!-- 子标签栏内容区 -->
        <div
          v-for="(item, index) in changeImgTitleData"
          :key="index"
          class="children"
        >
          <!-- 子标签包裹器 -->
          <div v-if="childrenActive == index" class="childrenWrapper">
            <!-- 图片包裹器 -->
            <div
              class="imgWrapper"
              v-for="(item, index) in changeImgData"
              :key="index"
            >
              <!-- 图片 -->
              <img
                :src="item.imagrSrc"
                :alt="item.name"
                class="image"
                @click="changImgClick(index)"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 换文字内容区 -->
      <div v-if="fatherActive === 1" class="childrenTabs">
        <!-- 子标签选项栏 -->
        <div class="childrenTabsTop">
          <div
            class="childrenTabsTitle"
            v-for="(item, index) in changeImgTitleData"
            :key="index"
            @click="childrenTabClick(index)"
          >
            <div
              class="childrenTabsTitle1"
              :style="childrenActive !== index && childrenStyle.childrenStyle1"
            >
              {{ item.name }}
            </div>
            <div
              class="childrenTabsTitle2"
              :style="childrenActive !== index && childrenStyle.childrenStyle2"
            ></div>
          </div>
        </div>
        <!-- 换文字子标签栏内容区 -->
        <div class="children">
          <!-- 换文字子标签栏包裹器 -->
          <div class="textChildren">
            <!-- 每两个成语为一个组件,遍历一半的成语数量，向上取整 -->
            <div
              class="textChildrenItem"
              v-for="index in Math.ceil(idiomData.length / 2)"
              :key="index"
            >
              <!-- 显示奇数成语,数据下标为(index - 1) * 2,当前下标为(index - 1) * 2时,显示轮廓 -->
              <div
                class="textChildrenItem1"
                @click="idiomClick((index - 1) * 2)"
                :style="nowIdiom === (index - 1) * 2 && idiomStyle"
              >
                <span>{{ idiomData[(index - 1) * 2] }} </span>
              </div>
              <!-- 显示偶数成语,数据下标为(index - 1) * 2 + 1,如果数据为空则不显示,当前下标为(index - 1) * 2 + 1时,显示轮廓 -->
              <div
                class="textChildrenItem1"
                v-if="idiomData[(index - 1) * 2 + 1]"
                @click="idiomClick((index - 1) * 2 + 1)"
                :style="nowIdiom === (index - 1) * 2 + 1 && idiomStyle"
              >
                <span>{{ idiomData[(index - 1) * 2 + 1] }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 选文字底色内容区 -->
      <div v-if="fatherActive === 2" class="selectText">
        <div class="selectTextWrapper">
          <!-- 每个颜色 -->
          <div
            class="selectTextItem"
            v-for="(item, index) in colorNameData"
            :key="index"
            @click="selectColorClick(index)"
          >
            <!-- 背景颜色是动态的,如果为白色,则需要添加灰色边框 -->
            <div
              class="TextimgWrapper"
              :style="{
                'background-color': item.value,
                border: '0.0625rem solid #ececec',
              }"
            >
              <!-- 图片 -->
              <img src="../images/cfpl.png" alt="乘风破浪" class="Textimg" />
            </div>
            <!-- 颜色名字 -->
            <div class="colorName">
              <!-- 三角形 -->
              <div class="triangle" v-if="nowColorName === index"></div>
              <!-- 矩形 -->
              <div
                class="rectangle"
                :style="nowColorName === index && rectangleStyle"
              >
                <!-- 圆形 -->
                <div class="circular" v-if="nowColorName === index"></div>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 印名字内容区 -->
    <div v-if="isShowSetName" class="setName">
      <div class="setNameWrapper">
        <!-- 印名字内容的头部 -->
        <div class="nameTitle">
          <img src="../images/nametitle.png" alt="名字" class="nametitleImg" />
          <span>输入您的姓名</span>
        </div>
        <!-- 印名字内容的主体 -->
        <div class="nameMain">
          <input type="text" v-model="inputName" @input="nameInput" />
          <span>{{ inputName.length }}/4</span>
        </div>
        <!-- 印名字内容的底部按钮 -->
        <div class="nameFooter">
          <div class="nameClose" @click="nameClose"><span>关闭</span></div>
          <div class="nameSubmit" @click="nameSubmit"><span>确认</span></div>
        </div>
      </div>
    </div>
    <!-- 立即下单 -->
    <div class="pay">
      <div class="payBtn">
        <!-- 无优惠券时显示 -->
        <div v-if="isShowCoupon === 0" class="noCoupon" @click="payClick">
          <span>立即下单</span>
        </div>
        <!-- 有优惠券时显示 -->
        <div v-if="isShowCoupon !== 0" class="coupon">
          <span>立即下单</span>
          <span class="couponSpan">你有{{ isShowCoupon }}张未使用的优惠券</span>
        </div>
      </div>
    </div>
    <!-- <div>

    </div> -->
  </div>
</template>

<script>
export default {
  name: "footerfun",
  data() {
    return {
      // 当前点击的父Tab
      fatherActive: 0,
      // 当前点击的子Tab
      childrenActive: "0",
      // 所有图标
      src: [
        // 换图案的图标
        require("../images/changeImg.png"),
        // 换文字的图标
        require("../images/changeText.png"),
        // 选文字底色的图标
        require("../images/changeTextImg.png"),
        // 印名字的图标
        require("../images/setName.png"),
        // 点击换图案的图标
        require("../images/changeImg1.png"),
        // 点击换文字的图标
        require("../images/changeText1.png"),
        // 点击选文字底色的图标
        require("../images/changeTextImg1.png"),
        // 点击印名字的图标
        require("../images/setName1.png"),
      ],
      // 换图案图标
      change0: require("../images/changeImg1.png"),
      // 换文字图标
      change1: require("../images/changeText.png"),
      // 选文字底色图标
      change2: require("../images/changeTextImg.png"),
      // 印名字图标
      change3: require("../images/setName.png"),
      // 父标签页所有标签样式
      allStyle: [
        "faterTabsTitle faterTabsTitle1",
        "faterTabsTitle faterTabsTitle2",
        "faterTabsTitle faterTabsTitle3",
        "faterTabsTitle faterTabsTitle2",
        "faterTabsTitle faterTabsTitle1Click",
        "faterTabsTitle faterTabsTitle2Click",
        "faterTabsTitle faterTabsTitle3Click",
        "faterTabsTitle faterTabsTitle2Click",
      ],
      // 换图案样式
      style0: "faterTabsTitle faterTabsTitle1Click",
      // 换文字样式
      style1: "faterTabsTitle faterTabsTitle2",
      // 选文字底色样式
      style2: "faterTabsTitle faterTabsTitle3",
      // 印名字样式
      style3: "faterTabsTitle faterTabsTitle2",
      // 是否显示印名字弹窗
      isShowSetName: false,
      // 子标签标题样式
      childrenStyle: {
        childrenStyle1: "background-color:#f1f1f1;color:#333333",
        childrenStyle2: "display:none",
      },
      // 当前点击的图片
      nowImg: "0",
      // 当点击父标签的换图案时,获取换图案子标签数据
      changeImgTitleData: {
        0: {
          name: "吾皇万睡",
          content: "内容1",
        },
        1: {
          name: "胖虎来了",
          content: "内容2",
        },
        2: {
          name: "栋来也",
          content: "内容3",
        },
        3: {
          name: "栋来也",
          content: "内容4",
        },
        4: {
          name: "栋来也",
          content: "内容5",
        },
        5: {
          name: "栋来也",
          content: "内容6",
        },
        6: {
          name: "栋来也",
          content: "内容7",
        },
        7: {
          name: "栋来也",
          content: "内容3",
        },
        8: {
          name: "栋来也",
          content: "内容8",
        },
      },
      //当点击换图案子标签时,获取对应的图片数据
      changeImgData: {
        0: {
          name: "图片名1",
          imagrSrc: require("../images/changeImgList.png"),
          isShowText: true,
        },
        1: {
          name: "图片名2",
          imagrSrc: require("../images/changeImgList.png"),
          isShowText: true,
        },
        2: {
          name: "图片名3",
          imagrSrc: require("../images/changeImgList.png"),
          isShowText: false,
        },
        3: {
          name: "图片名4",
          imagrSrc: require("../images/changeImgList.png"),
          isShowText: false,
        },
        4: {
          name: "图片名5",
          imagrSrc: require("../images/changeImgList.png"),
          isShowText: false,
        },
        5: {
          name: "图片名6",
          imagrSrc: require("../images/changeImgList.png"),
          isShowText: true,
        },
        6: {
          name: "图片名7",
          imagrSrc: require("../images/changeImgList.png"),
          isShowText: false,
        },
        7: {
          name: "图片名8",
          imagrSrc: require("../images/changeImgList.png"),
          isShowText: true,
        },
        8: {
          name: "图片名9",
          imagrSrc: require("../images/changeImgList.png"),
          isShowText: true,
        },
      },
      // 是否显示换文字和换文字底色
      isShowText: true,
      // 是否有优惠券
      isShowCoupon: 1,
      // 成语数据
      idiomData: [
        "一帆风顺",
        "乘风破浪",
        "升官发财",
        "吉星高照",
        "五福临门",
        "多喝热水",
        "一帆风顺",
        "乘风破浪",
        "一帆风顺",
        "乘风破浪",
        "一帆风顺",
        "乘风破浪",
        "一帆风顺",
      ],
      // 当前点击的成语下标
      nowIdiom: 0,
      // 成语按钮点击样式
      idiomStyle: "border: #9c2e31 solid 1px;color: #9c2e31;",
      // 当前点击的颜色下标
      nowColorName: "0",
      // 颜色名字矩形样式
      rectangleStyle: "border: 0.0625rem #fc7867 solid;color: #fc7867;",
      colorNameData: {
        0: {
          value: "#ffffff",
          name: "珍珠白",
        },
        1: {
          value: "#edc862",
          name: "银杏黄",
        },
        2: {
          value: "#f05b6f",
          name: "蔷薇色",
        },
        3: {
          value: "#81cde4",
          name: "蔚蓝色",
        },
        4: {
          value: "#0a874b",
          name: "松花绿",
        },
        5: {
          value: "#fcd5ce",
          name: "樱花粉",
        },
        6: {
          value: "#bdb2ff",
          name: "香芋紫",
        },
      },
      // 当前输入的名字
      inputName: "",
      // 当前确认的名字
      nowName: "",
    };
  },
  methods: {
    tabClick(index) {
      // 如果点击的标签不为当前标签,且不是印名字
      if (this.fatherActive !== index && index !== 3) {
        // 要点击的图标名字
        let changeName1 = "change" + index;
        // 之前点击的图标名字
        let changeName2 = "change" + this.fatherActive;
        // 将要点击的图标改成点击状态的图片
        this[changeName1] = this.src[index + 4];
        // 将之前点击的图标改成未点击状态的图片
        this[changeName2] = this.src[this.fatherActive];

        // 要点击的图标名字
        let styleName1 = "style" + index;
        // 之前点击的图标名字
        let styleName2 = "style" + this.fatherActive;
        // 将要点击的样式改成点击状态的样式
        this[styleName1] = this.allStyle[index + 4];
        // 将之前点击的样式改成未点击状态的样式
        this[styleName2] = this.allStyle[this.fatherActive];

        //当前点击的标签索引赋值给fatherActive
        this.fatherActive = index;
      }
      // 如果印名字弹窗未显示且点击的是印名字
      if (!this.isShowSetName && index === 3) {
        this.isShowSetName = !this.isShowSetName;
      }
    },
    //点击印名字的内容时
    // setNameClick() {
    //   this.isShowSetName = !this.isShowSetName;
    // },
    // // 点击印名字白色框时
    // setNamenoClick(event) {
    //   // 阻止事件冒泡
    //   event.cancelBubble = true;
    // },
    // 点击子标签页标题时
    childrenTabClick(index) {
      if (this.childrenActive !== index) {
        //当前点击的标签索引赋值给childrenActive
        this.childrenActive = index;
        console.log(this.childrenActive);
      }
    },
    // 点击换图案的图片时
    changImgClick(index) {
      if (this.nowImg !== index) {
        this.nowImg = index;
        console.log(this.nowImg);
        console.log(this.changeImgData[index].name);
        this.isShowText = this.changeImgData[index].isShowText;
      }
    },
    // 点击其中一个成语时
    idiomClick(index) {
      if (this.nowIdiom !== index) {
        this.nowIdiom = index;
        console.log(index);
      }
    },
    // 点击其中一个颜色时
    selectColorClick(index) {
      if (this.nowColorName !== index) {
        this.nowColorName = index;
        console.log(this.nowColorName);
      }
    },
    // 名字输入框获取焦点时，实时监听输入框内容，实现最多输入4个字
    nameInput(e) {
      this.inputName = e.target.value.slice(0, 4);
    },
    // 点击关闭按钮时
    nameClose() {
      this.isShowSetName = !this.isShowSetName;
    },
    // 点击确认按钮时
    nameSubmit() {
      this.nowName = this.inputName;
      this.isShowSetName = !this.isShowSetName;
      console.log(this.nowName);
    },
    // 点击立即下单按钮时
    payClick(){
      console.log("立即下单");
    },
  },
};
</script>

<style lang="less" scoped>
// 底部功能区
#footerfun {
  width: 100%;
  height: 31.8%;
  position: absolute;
  background-color: white;
  // background-color: #caf0f8;
  top: 68.2%;
}
// 父标签页
.faterTabs {
  width: 100%;
  height: 74.5%;
  // background-color: #48cae4;
  position: relative;
  // 父标签标题栏
  .faterTabsTop {
    width: 100%;
    height: 23.5%;
    background-color: #e0e0e0;
    display: flex;
    align-items: flex-end;
    // justify-content: center;
    justify-content: flex-start;
    color: #666;
    font-size: 0.875rem;
    line-height: 1.875rem;
    // text-align: center;
    // 标签统一样式
    .faterTabsTitle {
      border-radius: 0.625rem 0.625rem 0 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      margin-left: 0.4375rem;
    }
    // 换图案未点击样式
    .faterTabsTitle1 {
      width: 21.7%;
      height: 75%;
      background-color: #ececec;
    }
    // 换文字和印名字未点击样式
    .faterTabsTitle2 {
      width: 21.7%;
      height: 75%;
      margin-left: 1.2077%;
      background-color: #ececec;
    }
    // 选文字底色未点击样式
    .faterTabsTitle3 {
      width: 27.8%;
      height: 75%;
      margin-left: 1.2077%;
      background-color: #ececec;
    }
  }
}
// 换图案换文字印名字图片样式
.changeImg {
  width: 1.125rem;
  margin-right: 0.3125rem;
  display: inline-block;
  margin-bottom: 0.375rem;
}
// 选文字底色图片样式
.changeImg1 {
  width: 1.125rem;
  margin-right: 0.3125rem;
  display: inline-block;
  margin-bottom: 0.375rem;
}
// 换图案点击样式
.faterTabsTitle1Click {
  width: 21.7%;
  color: #b02226;
  height: 100%;
  background-color: white;
}
// 换文字和印名字未点击样式
.faterTabsTitle2Click {
  width: 21.7%;
  color: #b02226;
  height: 100%;
  margin-left: 1.2077%;
  background-color: white;
}
// 选文字底色未点击样式
.faterTabsTitle3Click {
  width: 27.8%;
  color: #b02226;
  height: 100%;
  margin-left: 1.2077%;
  background-color: white;
}

// 子标签
.childrenTabs {
  width: 100%;
  height: 76.5%;
  overflow: hidden;
  // background-color: white;
}
// 子标签栏
.childrenTabsTop {
  width: 100%;
  height: 38.4%;
  background-color: white;
  display: flex;
  align-items: flex-end;
  padding: 0 0.625rem;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  // 子标签标题
  .childrenTabsTitle {
    // width: 19.3%;
    width: auto;
    height: 68%;
    flex-shrink: 0;
    // background-color: #f1f1f1;
    position: relative;
    margin-left: 0.625rem;
    margin-bottom: 0.25rem;
    // 点击时的样式
    .childrenTabsTitle1 {
      width: 100%;
      padding: 0 0.625rem;
      height: 82.35%;
      background-color: #b02226;
      color: white;
      line-height: 1.75rem;
      border-radius: 0.375rem;
      text-align: center;
      font-size: 1rem;
    }
    // 点击时的样式
    .childrenTabsTitle2 {
      // 绘制一个倒三角形,且底部为圆角
      width: 0.625rem;
      height: 0.625rem;
      background-color: #b0222600;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%) rotateZ(45deg);
      // border-radius: 0 0 0.1875rem 0;
      background: linear-gradient(135deg, transparent 50%, #b02226 0%);
      // background-size: 10px 10px;
      border-bottom-right-radius: 3px;
    }
  }
}

// 子标签内容
.children {
  overflow: hidden;
}
// 子标签内容包裹器
.childrenWrapper {
  width: 100%;
  // height: 61.6%;
  background-color: white;
  padding: 0 0.625rem;
  // padding-left: 0.625rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  // 图片包裹器
  .imgWrapper {
    width: 18.116%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    margin-left: 0.875rem;
    margin-top: 0.1875rem;
    flex-shrink: 0;
    // 图片
    .image {
      // 图片宽度
      width: 100%;
      // 图片高度
      height: auto;
      // 块元素
      display: block;
    }
  }
}

// 换文字子标签栏内容区
.textChildren {
  width: 100%;
  // height: 61.6%;
  background-color: white;
  padding: 0 0.625rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  // 换文字的item,两个成语为一组
  .textChildrenItem {
    flex-shrink: 0;
    width: 28.5%;
    height: 4.75rem;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    justify-content: flex-start;
    margin-left: 0.625rem;
    margin-top: .125rem;
    // background-color: #fae1dd;
    //成语按钮
    .textChildrenItem1 {
      width: 100%;
      height: 2.125rem;
      border: #ececec solid 1px;
      // border: #9c2e31 solid 1px;
      border-radius: 0.3125rem;
      line-height: 2.125rem;
      text-align: center;
      margin-bottom: .5rem;
    }
  }
}
// 选择文字底色区
.selectText {
  width: 100%;
  height: 76.5%;
  // background-color: turquoise;
  display: flex;
  align-items: center;
  overflow: hidden;
  .selectTextWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow-y: scroll;
    padding-right: 0.625rem;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  // 每个颜色
  .selectTextItem {
    flex-shrink: 0;

    width: 4.25rem;
    height: 6.25rem;
    margin-left: 1.25rem;
    // background-color: #f8edeb;
    // 图片包裹器
    .TextimgWrapper {
      width: 100%;
      height: 4.25rem;
      border-radius: 0.5rem;
      // 图片
      .Textimg {
        padding: 10%;
        width: 80%;
      }
    }
    // 颜色名字
    .colorName {
      width: 100%;
      position: relative;
      margin-top: 0.625rem;
      // 三角形
      .triangle {
        // 绘制一个三角形,且上部为圆角
        width: 0.625rem;
        height: 0.625rem;
        background-color: #b0222600;
        position: absolute;
        left: 50%;
        border-top: solid 0.0625rem #fc7867;
        border-left: solid 0.0625rem #fc7867;
        transform: translate(-50%, -50%) rotateZ(45deg);
        background: linear-gradient(315deg, transparent 50%, #fff 0%);
        border-top-left-radius: 3px;
      }
      // 矩形
      .rectangle {
        width: 100%;
        height: 1.5625rem;
        background-color: white;
        color: #666;
        justify-content: center;
        border-radius: 0.375rem;
        font-size: 0.8125rem;
        display: flex;
        align-items: center;
        // 圆形
        .circular {
          width: 0.875rem;
          height: 0.875rem;
          background-color: #fc7867;
          border-radius: 50%;
          margin-right: 0.25rem;
        }
      }
    }
  }
}

// 印名字显示框
.setName {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  // 印名字内容区
  .setNameWrapper {
    width: 91%;
    height: 12.75rem;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.625rem;
    padding: 0 1.5625rem;
    // 印名字内容头部
    .nameTitle {
      width: 100%;
      height: 31%;
      // background-color: #48cae4;
      display: flex;
      align-items: center;
      // 图片
      .nametitleImg {
        width: 1.4375rem;
        height: 1.4375rem;
        margin-right: 0.625rem;
      }
    }
    .nameMain {
      width: 100%;
      height: 27%;
      background-color: #e8e8e8;
      border-radius: 0.625rem;
      input {
        width: 85%;
        height: 100%;
        background-color: #e8e8e8;
        border-radius: 0.625rem;
        padding: 0 1.25rem;
      }
      span {
        color: #9c2e31;
      }
    }
    .nameFooter {
      width: 100%;
      height: 42%;
      // background-color: #ffe8d6;
      display: flex;
      align-items: center;
      justify-content: center;
      .nameClose {
        width: 40%;
        height: 2.5rem;
        background-color: #ffefee;
        border-radius: 1.25rem;
        text-align: center;
        line-height: 2.5rem;
        color: #9c2e31;
        margin-right: 1rem;
      }
      .nameSubmit {
        width: 40%;
        height: 2.5rem;
        border-radius: 1.25rem;
        text-align: center;
        line-height: 2.5rem;
        background-image: linear-gradient(
          to right,
          rgb(241, 77, 44),
          rgb(215, 9, 0)
        );
        color: #fff;
      }
    }
  }
}

// 立即下单区
.pay {
  width: 100%;
  height: 25.5%;
  background-color: white;
  position: absolute;
  // 立即下单按钮
  .payBtn {
    width: 80%;
    height: 74%;
    background-image: linear-gradient(
      to right,
      rgb(241, 77, 44),
      rgb(215, 9, 0)
    );
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2.65625rem;
    // 没有优惠券时显示
    .noCoupon {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }
    // 有优惠券时显示
    .coupon {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      
      // 优惠券文字
      .couponSpan {
        font-size: 0.75rem;
      }
    }
  }
}
@media (max-width:375px) {
    .textChildrenItem1{
    margin-bottom: .25rem !important;
  }
}

@media (max-width:320px) {
  .faterTabsTop{
    line-height: 1.5625rem !important;
  }
  .faterTabsTitle{
    font-size: .75rem;
  }
  .changeImg{
    width: .875rem;
  }
  .changeImg1{
    width: .875rem;
  }
  .childrenTabsTitle1{
    font-size: .875rem !important;
    line-height: 1.5rem !important;
  }
  .payBtn{
    font-size: .875rem !important;
  }
  .textChildrenItem1{
    height: 1.75rem !important;
    line-height: 1.75rem !important;
  }
  .selectTextItem{
    width: 3.5rem !important;
    height: 5.25rem !important;
  }
  .TextimgWrapper{
    height: 3.5rem !important;
  }
  .rectangle{
    font-size: .75rem !important;
  }
  .circular{
    width: .75rem !important;
    height: .75rem !important;
    margin-right: .125rem !important;
  }
  .setNameWrapper{
    height: 11.25rem !important;
  }
}
</style>